﻿

<!DOCTYPE html>

<html lang="en" class="no-js">



    <head>



        <meta charset="utf-8">

        <title>Nas Password</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta name="description" content="">

        <meta name="author" content="">

        <!-- CSS -->
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

        <link rel="stylesheet" href="assets/css/reset.css">

        <link rel="stylesheet" href="assets/css/supersized.css">

        <link rel="stylesheet" href="assets/css/style.css">
		<link rel="shortcut icon" href="./assets/img/375.png" type="image/x-icon">

		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/toastr.js/latest/toastr.min.js"></script>
		<link href="https://cdn.bootcss.com/toastr.js/latest/toastr.css" rel="stylesheet">
		<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

				<!--[if lt IE 9]>
					 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
				<style>
					.forms{
						margin: 150px auto 0 auto;
						position: relative;
						width: 305px;
						text-align: center;
					}
				.g-tips{
					 position: fixed;
					 top:0;
					 left:0;
					 bottom: 0;
					 right: 0;
					 background-color: rgba(0, 0, 0, .2);
					 display: none;
				}
				.g-content{
					width: 400px;
					height: 220px;
					background-color: white;
				  border-radius: 5px;
					-moz-box-shadow:0px 0px 20px #F2F2F2; 
					-webkit-box-shadow:0px 0px 20px #F2F2F2;
					box-shadow:0px 0px 20px #F2F2F2;
					position: absolute;
					top:50%;
					left:50%;
					margin-left: -200px;
					margin-top: -120px;
				}
				.changeBorder{
					border:2px solid red;
				}
				.g-oks{
					height: 50px;
					line-height: 50px;
					background-color: green;
					color:white;
					position: absolute;
					top:50%;
					left: 50%;
					margin-top:-25px;
					margin-left: -60px;
					border-radius: 5px;
					display: none;
					padding:0 10px;
				}
						/* 加载动画 */
				.wait{
					position: fixed;
					top:0;
					left:0;
					right: 0;
					bottom: 0;
					background-color: rgba(0, 0, 0, .8);
					display: none;
				}
				.spinner {
					margin: 300px auto 0;
					width: 50px;
					height: 60px;
					text-align: center;
					font-size: 10px;
				}
				
				.spinner > div {
					background-color: #67CF22;
					height: 100%;
					width: 6px;
					display: inline-block;

					-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
					animation: stretchdelay 1.2s infinite ease-in-out;
				}
				
				.spinner .rect2 {
					-webkit-animation-delay: -1.1s;
					animation-delay: -1.1s;
				}
				
				.spinner .rect3 {
					-webkit-animation-delay: -1.0s;
					animation-delay: -1.0s;
				}
				
				.spinner .rect4 {
					-webkit-animation-delay: -0.9s;
					animation-delay: -0.9s;
				}
				
				.spinner .rect5 {
					-webkit-animation-delay: -0.8s;
					animation-delay: -0.8s;
				}
				
				@-webkit-keyframes stretchdelay {
					0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
					20% { -webkit-transform: scaleY(1.0) }
				}
				
				@keyframes stretchdelay {
					0%, 40%, 100% {
						transform: scaleY(0.4);
						-webkit-transform: scaleY(0.4);
					}  20% {
						transform: scaleY(1.0);
						-webkit-transform: scaleY(1.0);
					}

				}
				.wait-tips{
						/* position: absolute; */
						margin: 5px auto;
						color:greenyellow;
						text-align: center;
				}
					#top{
						background:#222;
						color:  #ffffff;
						margin-bottom: 0;
					}
				</style>


    </head>



    <body>

	<header class="navbar navbar-static-top bs-docs-nav" id="top">
		<div class="container">
			<div class="navbar-header" >
				<button class="navbar-toggle collapsed " type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" style="width: 30%;height: 30%" aria-expanded="false">
					<span class="glyphicon glyphicon-menu-hamburger" id="nav-button"></span>
				</button>
				<a href="#" class="navbar-brand"  style="color:#ffffff;">Nas PassWord</a>
			</div>
			<nav id="bs-navbar" class="navbar-collapse collapse navbar-inverse" aria-expanded="false" style="height: 1px;color: #FFFFFF">
				<ul class="nav navbar-nav my-nav">
					<li>
						<a href="javascript:;" style="color: #FFFFFF" onclick="$('#howModel').modal('show')" >How</a>
					</li>
					<li >
						<a href="javascript:;" onclick="$('#emailModel').modal('show')" style="color: #FFFFFF">Contact Us</a>
					</li>


				</ul>
				<ul class="nav navbar-nav navbar-right">
					<!-- <li><a href="http://mb.bootcss.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'themes'])" target="_blank">主题/模板</a></li> -->
					<li><a href="https://chrome.google.com/webstore/detail/nasextwallet/gehjkhmhclgnkkhpfamakecfgakkfkco" style="color: #FFFFFF" >Nas Wallet-Extension</a></li>
				</ul>
			</nav>
		</div>
	</header>

<div class="main">

        <div class="forms" >

            <h1 style="color: #FFFFFF">Nas Password</h1>

            <div style="margin-top: 50px">

                <input type="text" name="username" class="username address" placeholder="input your wallet address" value="">

                <input type="password" name="password" class="password address-pwd" style="margin-top: 30px;" placeholder="input your password">

                <button type="reset" style="background-color: lightgreen;border: none;margin-top: 50px;background-color:rgba(255,255,255,.5);color: #0f0f0f" class="denglu">login</button>
								<button type="reset" class="zhuce" style="margin-top: 10px;margin-bottom:50px;border: none;background-color:rgba(255,255,255,.5);color: #0f0f0f">have no account? sign up>>></button>
                <div class="error"><span>+</span></div>

						</div>

        </div>

				<div class="g-tips main">
						<div class="g-content"  style="background-color:rgba(255,255,255,.9) ">
								<div  style="color:#333333;line-height:50px;height:50px;font-weight: 600;box-sizing: border-box;padding-top:10px;" >Please enter 6~18 letters or numbers for password</div>
								<!-- <div style="text-algin:center;color:grey;font-size:12px;margin-top:15px;margin-bottom: 20px;"> 若此地址已经注册，则此操作为修改密码</div> -->
								<div style="margin-left: 16%"  >
									<input type="password" class="form-control" id="pwd" placeholder="Password">
								</div>
								<div>
										<button type="button" class="btn btn-danger quxiao" style="width:100px;margin-right: 30px;">cancel</button>
										<button type="button" class="btn btn-success tijiao" style="width:100px;background-color: green;border: 0px;">submit</button>
								</div>
						</div>
				</div>
				<div class="g-oks">
						success
				</div>
				<div class="wait">
					<div class="spinner">
						<div class="rect1"></div>
						<div class="rect2"></div>
						<div class="rect3"></div>
						<div class="rect4"></div>
						<div class="rect5"></div>
					</div>
					<div class="wait-tips">
						 dealing...please wait
					</div>
				</div>
</div>
	<!--email-->
	<div class="modal fade" id="emailModel" tabindex="-1" role="dialog" aria-labelledby="email">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">developer email</h4>
				</div>
				<div class="modal-body">
					<h4>wojshiain@126.com</h4>

				</div>

				<div >

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="howModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">About Nas Password</h4>
				</div>
				<div class="modal-body">
					<h4>hash address is identify!</h4>
					<p>In the blockchain, your wallet address uniquely represents your identity:-D</p>
					<p>The most important thing is Protecting your key file  ！</p>
					<HR align=center width=100% color= #a2a9b9 SIZE=10>

					<h4>Why manage your accounts by blockChain?</h4>

					<p>It's difficult for you to remember your thousands accounts </p>
					<p>It is not recommended that you set all your account passwords to the same character, because once a website is compromised by hackers, you can use it to break through your other websites.</p>
					<p>So you can manage your accounts by private key</p>
					<HR align=center width=100% color= #a2a9b9 SIZE=10>

					<h4>Nas PassWord</h4>
					<p>Nas PassWord is based on Nebulas,all your info is encrypted by blockChain</p>
					<p>We never store any of your info</p>


				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
				</div>
			</div>
		</div>
	</div>
        <script src="assets/js/supersized.3.2.7.min.js"></script>

        <script src="assets/js/supersized-init.js"></script>

				<script src="assets/js/scripts.js"></script>
				<script src=lib/nebPay.js></script>
				<script src="lib/nebulas.js"></script>
				<script>
						var NebPay = require("nebpay");
						var nebPay = new NebPay();
						var dappAddress = "n1tgVw38eKnBqMg4J1pfE8isz8PMSwnLMyW";

						var HttpRequest = require("nebulas").HttpRequest;
						var Neb = require("nebulas").Neb;
						var Account = require("nebulas").Account;
						var Transaction = require("nebulas").Transaction;
						var Unit = require("nebulas").Unit;
						var neb = new Neb();
						// neb.setRequest(new HttpRequest("https://testnet.nebulas.io"));
						neb.setRequest(new HttpRequest("https://mainnet.nebulas.io"));
						var account, tx, txhash, timer;


						 // 点击登录
							var Uaddress = "";
							var UPassword = "" 
						window.onload = function () {
                            $('#howModel').modal('show')
                        }
						 $(".denglu").click(function(){
								// 判断地址和密码的格式，不正确就不发送请求
								var address = $(".address")
								var addressP = $(".address-pwd")
								var addressVal = address.val()
								var addressPVal = addressP.val()
								if(!testAddress(addressVal)){
                                    toastr.warning('Incorrect address format\n');

                                    address.addClass("changeBorder")
									return
								}
								if(!testPassword(addressPVal)){
                                    toastr.warning('Incorrect pass format\n');

                                    addressP.addClass("changeBorder")
									return
								}
								Uaddress = addressVal
								UPassword = addressPVal
								// 地址和密码格式都正确,发送请求
								var callArgs = "[\"" + addressVal + "\"" + ","+ "\"" +addressPVal+ "\"]";
								// nebPay.simulateCall(dappAddress,"0","getAccount",callArgs,{
								// 	listener:login
								// })
                             	var value = "0";   // 金额
                             	var nonce = "0";   // 交易序号
                             	var gas_price = "1000000"; // 手续费价格
                             	var gas_limit = "2000000"; // 手续费限制
                             	var callFunction = "getAccount";
                             	var contract = { // 合约
                                 	"function": callFunction,  // 方法名
                                 	"args": callArgs            // 参数
                             	}
                             toastr.success('plz wait,we are query from chain.If no respond,refresh again!');
                             $(".wait").fadeIn(10)
                             // 使用api.call执行合约中的方法
                             	neb.api.call(Uaddress, dappAddress, value, nonce, gas_price, gas_limit, contract).then(function (res) {

                                    var result = res.result
                                    console.log(res)
                                    console.log(result)
                                    if (result === "\"0\""){
                                        $(".wait").fadeOut(10)

                                        toastr.success('success login in ');
                                        // 将地址和密码存入sessionStorage
                                        sessionStorage.setItem("password",UPassword);
                                        sessionStorage.setItem("address",Uaddress);
                                        setTimeout(function(){
                                            window.location.href ="./show.html";
                                        },500)
                                    }else if(result === "\"1\""){
                                        toastr.warning('incorrect pass');

                                    }else if(result === "\"2\""){
                                        toastr.warning('this address is not register');
                                        $(".wait").fadeOut(10)
                                    }

                             }).catch(function (err) {
                                    toastr.warning('network error, plz refresh');

                                    console.log("error:" + err.message)
                             })
						 })

				  	 // 点击注册
						$(".zhuce").click(function () { 
							$(".g-tips").fadeIn(500);
						})
						
						// 注册界面 点击取消
					 $(".quxiao").click(function(){
							$(".g-tips").fadeOut(500);
							var html = $("#pwd")
							html.val("")
							html.removeClass("changeBorder")
					 })

					 // 注册界面 点击提交
					 $(".tijiao").click(function(){
							// 检测密码和地址是否符合
							if(testWallte()){
								return;
							}
							var html = $("#pwd")
							var pwd = html.val()
							if(!testPassword(pwd)){
								 html.addClass("changeBorder")
							}else{
								// 密码和长度通过，开始调用 智能合约 注册
								var callArgs = "[\"" + pwd + "\"]";
									
							  nebPay.call(dappAddress,"0","createAccount",callArgs,{
									listener:regist
								})
                // 注册成功后的显示效果
								$(".g-tips").fadeOut(500);
								html.val("")
								html.removeClass("changeBorder")
							}
					 })	 
// ---------------------------监听函数------------------------
           function regist(res) {
								console.log(res);
								var txhash = res.txhash;
								console.log(txhash)
								if(txhash){
									testTransitionStatus(txhash,function(){
											$(".wait").fadeOut(10)
											toastr.success("success register")
											setTimeout(function(){
												window.location.reload(true);
											},1500)
											
									})
								}
					  }
					 
						// 登录监听
						function login(res) {
                            toastr.success('wait plz, querying from chain');

                            var result = res.result
							 console.log(res)
							 console.log(result)
							 if (result === "\"0\""){

                                 toastr.success('login success');
								// 将地址和密码存入sessionStorage
								sessionStorage.setItem("password",UPassword);
								sessionStorage.setItem("address",Uaddress);
								setTimeout(function(){
									window.location.href ="./show.html";
								},500)
							 }else if(result === "\"1\""){
								 toastr.warning("incorrect pass")
							 }else if(result === "\"2\""){
                                 toastr.warning("your address have'nt register")
							 }
						}
// ---------------------------功能函数-------------------------
						function testTransitionStatus(txhash,callback){
							timer = setInterval(function(){
									$(".wait").fadeIn(500)
									neb.api.getTransactionReceipt({hash:txhash}).then(function (res) { 
											if(res.status === 1){
												clearInterval(timer)
												if(callback){
													callback()
												}
												return 
											}
									})
							},2000)
						}
					 function tips(text,background,time){
						  var html = $(".g-oks");
							html.html(text)
							background = background || "green"
							time = time || 1000
							html.css("backgroundColor",background)
							$(".g-oks").fadeIn(500);
							setTimeout(function(){
								$(".g-oks").fadeOut(1000)
							},time)
					 }
					 function testPassword(pwd){
							var pat = /^[a-zA-Z0-9]{6,18}$/;
							return pat.test(pwd)
					 }
					 function testAddress(address){
							var pat = /^[a-zA-Z0-9]{35}$/;
							return pat.test(address)
					 }
					 function testWallte(){
							if(typeof webExtensionWallet === undefined ||typeof webExtensionWallet === null){
								alert("Install Chrome Nebulas-WebExtensionWallet")
								return true
							}
							return false;
						}
				</script>
		
    </body>



</html>



